<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端的数据源获取</title>


	</head>
	<body>

		<div id="app">

			<h1>用户新增</h1>
			<div>
				姓名：<input type="text" v-model="addUser.name" /><br>
				性别：<input type="text" v-model="addUser.sex" /><br>
				信息：<input type="text" v-model="addUser.userInfo" /><br>
				地址：<input type="text" v-model="addUser.addrs" /><br>
				城市：<input type="text" v-model="addUser.city" /><br>
				<button @click="addUserBtn">确定</button>
			</div>
			<hr>
			<!-- 修改用户信息 -->
			<div>
				<h1>修改用户信息 </h1>
				id：<input type="text" v-model="updateUser.id" disabled /><br>
				姓名：<input type="text" v-model="updateUser.name" /><br>
				性别：<input type="text" v-model="updateUser.sex" /><br>
				信息：<input type="text" v-model="updateUser.userInfo" /><br>
				地址：<input type="text" v-model="updateUser.addrs" /><br>
				城市：<input type="text" v-model="updateUser.city" /><br>
				<button @click="updaUserBtn">确定</button>

			</div>
			<hr>
			<!-- 显示所有用户信息 -->
			<table id="tab1" border="1px" width="80%" align="center">
				<tr>
					<th>用户id</th>
					<th>名字</th>
					<th>性别</th>
					<th>用户信息</th>
					<th>地址</th>
					<th>城市</th>
					<th>操作</th>
				</tr>
				<tr align="center" v-for="userInfo in userInfoList">
					<td v-text="userInfo.id"></td>
					<td v-text="userInfo.name"></td>
					<td v-text="userInfo.sex"></td>
					<td v-text="userInfo.userInfo"></td>
					<td v-text="userInfo.addrs"></td>
					<td v-text="userInfo.city"></td>
					<td>
						<button @click="updateUserBtn(userInfo)">修改</button>
						<button @click="deleteById(userInfo.id)">删除</button>
					</td>

				</tr>
			</table>
		</div>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: '#app',
				data: {
					userInfoList: [],//创建用户信息集合，保存用户所有信息
					//创建用户新增对象，用于保存我们输入的信息，传递对象给后台
					addUser: {     
						name: '',
						sex: '',
						userInfo: '',
						addrs: '',
						city: ''
					},
					
					//创建用户修改对象，信息查询和删除不用定义对象也可以操作
					updateUser: {
						id: '',
						name: '',
						sex: '',
						userInfo: '',
						addrs: '',
						city: ''
					}

				},
				methods: {
					//普通方法写的数据获取
					getUserInfo() {
						//写axios的获取语句
						axios.get("/getAll")
							.then(result => {
								//console.log(result.data)
								this.userInfoList = result.data
							})
					},
					//根据用户的id删除用户
					async deleteById(id) {
						let {
							data: result
						} = await axios.delete("/user/" + id)

						this.getUserInfo()


					},
					async addUserBtn() {
						let {
							data: result
						} = await axios.post("/user", this.addUser)
						this.getUserInfo()
						this.addUser = {}
					},
					// 将要修改的用户数据添加到修改框中
					updateUserBtn(userInfo) {
						this.updateUser = userInfo

					},
					// 修改用户信息
					async updaUserBtn() {
						let {
							data: result
						} = await axios.put("/user", this.updateUser)
						this.getUserInfo()
						this.updateUser = {}
					}


				},
				computed: {

				},

				created() {
					//1.触发函数调用
					this.getUserInfo()
				}

			})
		</script>

	</body>
</html>
